<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.v2.jsp"%>
<script>
		cmdList = "/activitychannel/queryList.action";
		cmdDel  = "/activitychannel/deleteInfo.action";
		cmdGet  = "/activitychannel/getInfo.action";
		cmdEdit = "/activitychannel/editInfo.action";
</script>
<style>
#jquery-table td {
	cursor: pointer !important;
	word-break: break-all;
	word-wrap: break-word;
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}

a.check {
	margin-bottom: 10px;
}

@media ( min-width : 768px) and (max-width: 1200px) {
	.backup-text {
		width: 100px !important;
	}
}
</style>
</head>
<body class="no-skin">
	<div class="load_bg" style="display: none;"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<div id="test"></div>
		<form id="queryForm">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">选择条件进行查询</h4>

								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>

							<div class=" widget-body">
								<div class="widget-main" id="condition">
								
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >渠道：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
													<s:select id="channelList" name="channel" list="%{paramsMap.channelList}" listKey="channel" listValue="channel_name" 
													headerKey="" headerValue="------请选择------" cssClass="form-control"></s:select>
											</div>
										</div>
									</div>
									<div class="form-group col-xs-12 col-sm-4">
										<label class="col-sm-2 control-label"  style="text-align:right" >备注：</label>
										 <div class="col-sm-4">
											<div class="input-daterange input-group col-sm-12">
												<input type="text" class="input-sm form-control" style="padding-left:0px" name="remark" />
											</div>
										</div>
									</div>
											
								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>
					<!-- /.col-sm-12 -->
					<div class="col-md-12 center">
						<div class="clearfix form-actions myaction">

							<button class="btn btn-purple  no-border" type="button"
								name="btn-query" onclick="query_any()">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
								查询
							</button>
							&nbsp;&nbsp;&nbsp;
							<button class="btn btn-grey no-border" type="reset">
								<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i> 重置
							</button>
							<a class="btn btn-grey  no-border" data-toggle="modal" onclick="edit(-1)"> 添加 </a>

						</div>
					</div>
				</div>
				<!-- /.row -->

				<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table"
							class="table table-striped table-bordered table-hover">
						</table>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->

			</div>
			<!-- /.page-content-area -->
		</form>
	</div>
	<!-- /.page-content -->

<%@ include file="/common/common-js.jsp"%>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>


<script type="text/javascript">
	//接受URL参数，进行文档写入
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return decodeURI(r[2]);
		return null;
	}

	//【查询】按钮Click事件
	function query_any() {
		$("#output").removeAttr("style");
		$(".load_bg").removeAttr("style");
		$(".load_img").removeAttr("style");
		if(jqTable != null){
			jqTable.fnDraw();
		} else{
			loaddata();
		}
		$("#delete_btn").attr("style","display:block");
		$("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
	}

	var jqTable = null;
	var loaddata = function() {
		jQuery(function($) {
			jqTable = $('#jquery-table').dataTable({
				//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
				"columnDefs" : [
						{
							"title" : '渠道号',
							"targets" : [ 0 ],
							"data" : 'channel',
							"class" : "center",
							"bSortable" : false,
							"width" : "50px",
						},
						{
							"title" : '活动渠道标识',
							"targets" : [ 1 ],
							"data" : "activity",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px",
						},
						{
							"title" : '备注',
							"targets" : [ 2 ],
							"data" : "remark",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '活动链接',
							"targets" : [ 3 ],
							"data" : "url",
							"class" : "center",
							"bSortable" : false,
							"width" : "50px"
						},
						{
							"title" : '操作',
							"targets" : [ 4 ],
							"class" : "center",
							"bSortable" : false,
							"width" : "50px",
							"render": function(value, type, row) {
								var temp =  "<input class='btn btn-success btn-sm' type='button' name='PK' value='编辑' onclick='edit("+ row.id +")'/>&nbsp;&nbsp;&nbsp;&nbsp;";
									temp += "<input class='btn btn-blue btn-sm' type='button' name='PK' value='删除' onclick='del("+ row.id +")'/>";
	                         	return temp;
					    	 }
						}, ],
				"sAjaxSource": ctx + cmdList + "?rand=" + Math.random(),//数据源URL
				"fnServerData" : function(sSource, aoData,fnCallback) {
					var data = $('#queryForm').serializeObject();
					data.aoData = JSON.stringify(aoData);
					$.ajax({
						"type" : "POST",
						"dataType" : 'json',
						"url" : sSource,
						"data" : data,
						"success" : function(resp) {
							fnCallback(resp);
							initListPage();
						},
						"error" : function(XMLHttpRequest,
								textStatus, errorThrown) {
						},
						"complete" : function() {
							$(".load_bg,.load_img").hide();
						}
					});
				},

				"sScrollXInner" : "100%",
				"sScrollY" : "100%",//如果不设置，IE会有问题
				"aaSorting" : [ [ 0, "asc" ] ] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
			});
		});
	};

	jQuery(function($) {
		$("#channelList").combobox();
		//进入页面就自动查询并渲染列表			
		loaddata();
	});
	
	//打开修改页面
	function edit(id){
		var surl = cmdGet + "?id="+id;
		openDialogWithRand(surl, 800, 800, "编辑配置", function(data) {
			query_any();
		});	
		return false;
	}
	
	//删除
	function del(id){
		var answer = window.confirm("是否确认删除?");
		if(answer){
			var data = {"id":id};
			$.ajax({
				type:"post",	
				async:true,
				data:data,
				url: ctx + cmdDel + "?rand=" + Math.random(),
				success:function(resp){
					alert("删除成功！");
					query_any();
				},
				error:function(error){
					alert("删除失败！");
				}
			});
		}
	}
	
</script>

</body>
</html>